<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <el-form-item label="光缆名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入光缆名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="供电公司" prop="area">
        <el-select
          v-model="queryParams.area"
          placeholder="请选择供电公司"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in areaOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="起点" prop="startSourceType">
        <el-select
          v-model="queryParams.startSourceType"
          placeholder="请选择起点"
          clearable
          filterable
          size="small"
        >
          <el-option
            v-for="dict in stationOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="终点" prop="endSourceType">
        <el-select
          v-model="queryParams.endSourceType"
          placeholder="请选择终点"
          clearable
          filterable
          size="small"
        >
          <el-option
            v-for="dict in stationOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >
          搜索
        </el-button>
        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
          重置
        </el-button> -->
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:cable:add']"
        >
          新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['system:cabinet:import']"
        >
          导入
        </el-button>
      </el-col>
      <!--<el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:cable:export']"
        >
          导出
        </el-button>
      </el-col>-->
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <!-- <el-row :gutter="20" class="mb10">
      <el-col>
        <div class="colStyle">
          <div class="resNum">查询结果：({{ total }}条)</div>
          <div
            v-for="(item, index) in searchFormOptions"
            :key="index"
            class="searchBox"
          >
            <div class="text">
              {{ item.tableName }}：{{ item.conditionName }}{{ item.textVal }}
            </div>
            <div class="icon" @click="removeSearch(index)">
              <i class="el-icon-error"></i>
            </div>
          </div>
          <el-button
            type="warning"
            round
            size="mini"
            class="ml10 h28"
            @click="cleanAllSearch"
          >
            清除条件
          </el-button>
          <el-button
            type="primary"
            round
            size="mini"
            class="h28"
            icon="el-icon-plus"
            @click="openAddModel"
          >
            追加条件
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb10 mt20" v-if="addShow">
      <el-col :span="4">
        <el-select
          v-model="searchOptions.fieldName"
          placeholder="请选择追加字段"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in fieldNameOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="searchOptions.condition"
          placeholder="请选择条件"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in conditionOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="searchOptions.val"
          placeholder="请输入条件的值"
          clearable
          size="small"
        />
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="addSearch"
        >
          追加
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" size="small" @click="closeAddModel">
          取消
        </el-button>
      </el-col>
    </el-row> -->
    <el-table v-loading="loading" :data="cableList" @row-click="toClick" @sort-change="tableSortChg">
      <el-table-column label="#" align="center" prop="id" width="55">
        <template slot-scope="scope">
          <span>
            {{
              (queryParams.pageNum - 1) * queryParams.pageSize +
              (scope.$index + 1)
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="光缆名称" align="center" prop="name" sortable="custom"/>
      <el-table-column label="供电公司" align="center" prop="area" :formatter="areaFormat" />
      <el-table-column label="起点类型" align="center" prop="startSourceType" :formatter="startSourceTypeFormat"/>
      <el-table-column label="终点类型" align="center" prop="endSourceType" :formatter="endSourceTypeFormat"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-hasPermi="['system:cable:edit']"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改光缆对话框 -->
    <el-dialog :title="title" :visible.sync="open" :width="getDialogWidth()" append-to-body @closed="clearFiles">
      <el-form ref="form" :model="form" :rules="rules" label-width="125px" :validate-on-rule-change="false">
        <el-row>
          <el-col :span="5">
            <div style="max-height:45vh;overflow-y:auto;border-right:#DCDFE6 solid 1px;">
              <el-upload 
              :headers="upload.headers"
              :file-list="fileList"
              :action="field101Action"
              :before-upload="imgUpload"
              :on-success="imgFileSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              list-type="picture-card"
              accept="image/*">
              <i class="el-icon-plus"></i>
            </el-upload>
            </div>
          </el-col>
          <el-col :span="19">
            <el-col :span="12">
              <el-form-item label="光缆名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入光缆名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供电公司" prop="area">
                <el-select
                  v-model="form.area"
                  placeholder="请选择供电公司"
                  clearable
                  multiple
                >
                  <el-option
                    v-for="dict in areaOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="光缆类型" prop="opticalCableType">
                <el-select
                  v-model="form.opticalCableType"
                  placeholder="请选择光缆类型"
                  clearable
                >
                  <el-option
                    v-for="dict in cableTypeOption"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属线路" prop="affiliationLine">
                <el-input v-model="form.affiliationLine" placeholder="请输入所属线路" />
              </el-form-item>
            </el-col>
          
            <el-col :span="12">
              <el-form-item label="长度" prop="length">
                <el-input v-model="form.length" placeholder="请输入长度" >
                <template slot="append">KM</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="芯数" prop="opticalCoreNum">
                <el-select
                  v-model="form.opticalCoreNum"
                  placeholder="请选择起点类型"
                  filterable
                >
                  <el-option
                    v-for="dict in opticalCoreNumOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="线路" prop="opticalLine">
                <el-select
                  v-model="form.opticalLine"
                  placeholder="请选择线路"
                  filterable
                  clearable
                  multiple
                >
                  <el-option
                    v-for="dict in opticalLineOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起点类型" prop="startSourceType">
                <el-select
                  v-model="form.startSourceType"
                  placeholder="请选择起点类型"
                  filterable
                >
                  <el-option
                    v-for="dict in stationTypeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起点资源" prop="startSource">
                <el-select
                  v-model="form.startSource"
                  placeholder="请输入起点资源"
                  filterable
                >
                  <el-option
                    v-for="dict in stationOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="终点类型" prop="endSourceType">
                <el-select v-model="form.endSourceType" placeholder="请选择终点类型" filterable >
                  <el-option
                    v-for="dict in stationTypeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="终点资源" prop="endSource">
                <el-select v-model="form.endSource" placeholder="请输入终点资源" filterable >
                  <el-option
                    v-for="dict in stationOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="form.remark"
                  placeholder="备注"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="产权单位" prop="propertyUnit">
                <el-input
                  v-model="form.propertyUnit"
                  placeholder="请输入产权单位"
                />
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="光缆名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入光缆名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供电公司" prop="area">
              <el-select
                v-model="form.area"
                placeholder="请选择供电公司"
                clearable
                multiple
              >
                <el-option
                  v-for="dict in areaOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="光缆类型" prop="opticalCableType">
              <el-select
                v-model="form.opticalCableType"
                placeholder="请选择光缆类型"
                clearable
              >
                <el-option
                  v-for="dict in cableTypeOption"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属线路" prop="affiliationLine">
              <el-input v-model="form.affiliationLine" placeholder="请输入所属线路" />
            </el-form-item>
          </el-col>
          
          
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="长度" prop="length">
              <el-input v-model="form.length" placeholder="请输入长度" >
              <template slot="append">KM</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="芯数" prop="opticalCoreNum">
              <el-select
                v-model="form.opticalCoreNum"
                placeholder="请选择起点类型"
                filterable
              >
                <el-option
                  v-for="dict in opticalCoreNumOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="线路" prop="opticalLine">
              <el-select
                v-model="form.opticalLine"
                placeholder="请选择起点类型"
                filterable
              >
                <el-option
                  v-for="dict in opticalLineOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="起点类型" prop="startSourceType">
              <el-select
                v-model="form.startSourceType"
                placeholder="请选择起点类型"
                filterable
              >
                <el-option
                  v-for="dict in stationTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="起点资源" prop="startSource">
              <el-select
                v-model="form.startSource"
                placeholder="请输入起点资源"
                filterable
              >
                <el-option
                  v-for="dict in stationOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="终点类型" prop="endSourceType">
              <el-select v-model="form.endSourceType" placeholder="请选择终点类型" filterable >
                <el-option
                  v-for="dict in stationTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="终点资源" prop="endSource">
              <el-select v-model="form.endSource" placeholder="请输入终点资源" filterable >
                <el-option
                  v-for="dict in stationOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                placeholder="备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="产权单位" prop="propertyUnit">
              <el-input
                v-model="form.propertyUnit"
                placeholder="请输入产权单位"
              />
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-divider content-position="left">缆芯信息</el-divider>
        <el-row>
          <el-col :span="22"></el-col>
          <el-col :span="1">
            <i
              @click="addXin()"
              class="el-icon-circle-plus"
              style="
                color: rgb(24, 144, 255);
                font-size: 35px;
                padding-left: 10px;
              "
            ></i>
          </el-col>
        </el-row>
        <el-row
          style="margin-bottom: 10px;"
          v-for="(xinItem, index) in xinList"
          :key="index"
        >
          <el-col :span="22">
            <div class="xin-content">
              <div
                class="xin-item"
                v-for="(item, index2) in xinItem"
                :key="index2"
              >
                <el-input v-model="item.cableValue">
                  <template slot="prepend">
                    芯{{ 8 * index + index2 + 1 }}
                  </template>
                </el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="1">
            <i
              @click="doDelete(index)"
              class="el-icon-remove"
              style="color: red; font-size: 35px; padding-left: 10px;"
            ></i>
          </el-col>
        </el-row> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="danger"
          plain
          @click="handleDelete(form)"
          v-if="title == '修改光缆'"
          v-hasPermi="['system:cable:remove']"
        >
          删 除
        </el-button>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm" style="width: 120px;">
          确 定
        </el-button>
      </div>
    </el-dialog>
    
    <!-- 预览 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!-- 光缆导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <!--        <div class="el-upload__tip" slot="tip">-->
        <!--          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的设备属性数据-->
        <!--          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>-->
        <!--        </div>-->
        <div class="el-upload__tip" style="color: red;" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
          <el-link type="info" style="font-size: 12px;" @click="importTemplate">
            下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="lookTitle" v-if="lookOpen" :visible.sync="lookOpen" :width="getDialogWidth()" append-to-body>
      <stationDetail :id="selectStationId"></stationDetail>
    </el-dialog>
  </div>
</template>

<script>
import stationDetail from '@/views/dialogDetail/station.vue'
import { getToken } from '@/utils/auth'
import {
  listCable,
  getCable,
  delCable,
  addCable,
  updateCable,
  exportCable,
  importTemplate,
} from '@/api/opticalcable/opticalcable'
import { stationDictList } from '@/api/station/station'
export default {
  name: 'Cable',
  components: {stationDetail},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 光缆表格数据
      cableList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      //追加条件的select参数
      fieldNameOptions: [],
      conditionOptions: [],
      //end
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        area: null,
        orderby: null,
        opticalCableType: null,
      },
      searchOptions: {
        fieldName: '',
        condition: '',
        val: '',
      },
      searchFormOptions: [],
       // 文件上传
      field101Action: process.env.VUE_APP_BASE_API + "/common/upload",
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      // 表单参数
      form: {
        area:[],
        opticalLine:[]//新增lmk
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: '请输入光缆名称', trigger: 'change' },
        ],
        area: [
          { type: 'array',required: true, message: '请选择供电公司', trigger: ['blur','change'] },
        ],
        opticalCableType: [
          { required: true, message: '请选择光缆类型', trigger: 'change' },
        ],
        affiliationLine:[
          { required: true, message: '请输入所属线路', trigger: 'change' },
        ],
        opticalCoreNum: [
          { required: true, message: '请选择芯数', trigger: 'change' },
        ],
        opticalLine: [
          { required: true, message: '请选择线路', trigger: 'change' },
        ],
        length: [{ required: true, message: '请输入长度', trigger: 'change' }],
        startSourceType: [
          { required: true, message: '请选择起点类型', trigger: 'change' },
        ],
        startSource: [
          { required: true, message: '请输入起点资源', trigger: 'change' },
        ],
        endSourceType: [
          { required: true, message: '请选择终点类型', trigger: 'change' },
        ],
        endSource: [
          { required: true, message: '请输入终点资源', trigger: 'change' },
        ],
        propertyUnit: [
          { required: true, message: '请输入产权单位', trigger: 'change' },
        ],
      },
      // 光缆导入参数
      upload: {
        // 是否显示弹出层（光缆数据导入）
        open: false,
        // 弹出层标题（光缆数据导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/cable/importData',
      },
      areaOptions: [],
      cableTypeOption: [],
      opticalCoreNumOptions:[],
      opticalLineOptions:[],
      //站点下拉选
      stationOptions: [],
      stationTypeOptions:[],
      addShow: false,
      xinList: [],
      selectStationId:null,
      lookOpen:false
    }
  },
  created() {
    this.getList()

    this.getDicts('area').then((response) => {
      this.areaOptions = response.data  
    })
    this.getDicts('optical_core_num').then((response) => {
      this.opticalCoreNumOptions = response.data
    })
    this.getDicts('optical_line').then((response) => {
      this.opticalLineOptions = response.data
    })
    this.getDicts('Cable_type').then((response) => {
      this.cableTypeOption = response.data
    })
    this.getDicts('operation').then((response) => {
      this.conditionOptions = response.data
    })
    this.getDicts('cable_condition').then((response) => {
      this.fieldNameOptions = response.data
    })
    this.getDicts('station_type').then((response) => {
      this.stationTypeOptions = response.data
    })
    stationDictList().then((res) => {
      this.stationOptions = res.data
    })
  },
  activated() {
    this.getList()
    this.getDicts('area').then((response) => {
      this.areaOptions = response.data
    })
    this.getDicts('Cable_type').then((response) => {
      this.cableTypeOption = response.data
    })
    this.getDicts('operation').then((response) => {
      this.conditionOptions = response.data
    })
    this.getDicts('cable_condition').then((response) => {
      this.fieldNameOptions = response.data
    })
    this.getDicts('station_type').then((response) => {
      this.stationTypeOptions = response.data
    })
    stationDictList().then((res) => {
      this.stationOptions = res.data
    })
  },
  methods: {
     tableSortChg(params) {
      this.queryParams.orderby = params.prop + ' ' + params.order.replace('ending', '')
      this.getList()
    }, 
    lookstart(row) {
      this.selectStationId = row.startSourceType;
      this.lookTitle = '起点类型详情'
      this.lookOpen = true
    },
    lookend(row) {
      this.selectStationId = row.endSourceType
      this.lookTitle = '终点类型详情'
      this.lookOpen = true
    },
    stopC(e) {
      if (e && e.stopPropagation) {
        e.stopPropagation
      } else {
        window.event.cancelBubble
      }
    },
    toClick(row) {
      this.handleUpdate(row)
    },
    addXin() {
      this.xinList.push([
        { cableValue: '' },
        { cableValue: '' },
        { cableValue: '' },
        { cableValue: '' },
        { cableValue: '' },
        { cableValue: '' },
        { cableValue: '' },
        { cableValue: '' },
      ])
    },
    doDelete(i) {
      this.xinList.splice(i, 1)
    },
    //追加条件操作
    openAddModel() {
      this.addShow = true
    },
    closeAddModel() {
      this.addShow = false
      this.searchOptions.fieldName = ''
      this.searchOptions.condition = ''
      this.searchOptions.val = ''
    },
    removeSearch(i) {
      if (this.queryParams[this.searchFormOptions[i].fieldName]) {
        this.queryParams[this.searchFormOptions[i].fieldName] = ''
      }
      this.searchFormOptions.splice(i, 1)
      this.getList()
    },
    addSearch() {
      if (
        !this.searchOptions.fieldName ||
        !this.searchOptions.condition ||
        !this.searchOptions.val
      ) {
        this.msgError('请填写完整搜索条件')
        return
      }
      let obj = { ...this.searchOptions }
      obj.tableName = this.selectDictLabel(this.fieldNameOptions, obj.fieldName)
      obj.conditionName = this.selectDictLabel(
        this.conditionOptions,
        obj.condition,
      )
      obj.textVal = obj.val
      this.searchFormOptions.push(obj)
      this.closeAddModel()
      this.getList()
    },
    cleanAllSearch() {
      this.searchFormOptions = []
      this.resetQuery()
    },
    //*******
    // 菜单状态字典翻译
    startSourceTypeFormat(row, column) {
      return this.selectDictLabel(this.stationTypeOptions, row.startSourceType)
    },
    endSourceTypeFormat(row, column) {
      return this.selectDictLabel(this.stationTypeOptions, row.endSourceType)
    },
    cableTypeFormat(row, column) {
      return this.selectDictLabel(this.cableTypeOption, row.opticalCableType)
    },
    areaFormat(row, column) {
      let arr = row.area.split(',');
      if(arr && arr.length){
        let rs = '';
        arr.forEach((e,i)=>{
          if(i==arr.length-1){
            rs+=this.selectDictLabel(this.areaOptions, e)
          }else{
            rs+=this.selectDictLabel(this.areaOptions, e)+','
          }
        })
        return rs
      }
      
    },
    /** 查询光缆列表 */
    getList() {
      this.loading = true
      let form = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        orderby: this.queryParams.orderby,
        queryData: [],
      }
      for (let i in this.searchFormOptions) {
        form.queryData.push({
          fieldName: this.searchFormOptions[i].fieldName
            .replace(/([A-Z])/g, '_$1')
            .toLowerCase(),
          condition: this.searchFormOptions[i].condition,
          val: this.searchFormOptions[i].val || '',
        })
      }
      listCable(form).then((response) => {
        this.cableList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        area: [],
        opticalLine:[],//新增lmk
        opticalCableType: null,
        length: null,
        startSourceType: null,
        startSource: null,
        endSourceType: null,
        endSource: null,
        propertyUnit: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.searchFormOptions = this.searchFormOptions.filter((res) => {
        return (
          res.fieldName != 'name' &&
          res.fieldName != 'opticalCableType' &&
          res.fieldName != 'area'
        )
      })
      if (this.queryParams.name) {
        this.searchFormOptions.push({
          fieldName: 'name',
          condition: 'like',
          val: this.queryParams.name,
          tableName: '光缆名称',
          conditionName: '',
          textVal: this.queryParams.name,
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'name'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'name') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      if (this.queryParams.startSourceType) {
        this.searchFormOptions.push({
          fieldName: 'startSourceType',
          condition: 'eq',
          val: this.queryParams.startSourceType,
          tableName: '起点类型',
          conditionName: '',
          textVal: this.selectDictLabel(
            this.stationOptions,
            this.queryParams.startSourceType,
          ),
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'startSourceType'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'startSourceType') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      if (this.queryParams.endSourceType) {
        this.searchFormOptions.push({
          fieldName: 'endSourceType',
          condition: 'eq',
          val: this.queryParams.endSourceType,
          tableName: '终点类型',
          conditionName: '',
          textVal: this.selectDictLabel(
            this.stationOptions,
            this.queryParams.endSourceType,
          ),
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'endSourceType'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'endSourceType') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      if (this.queryParams.area) {
        this.searchFormOptions.push({
          fieldName: 'area',
          condition: 'eq',
          val: this.queryParams.area,
          tableName: '供电公司',
          conditionName: '',
          textVal: this.selectDictLabel(
            this.areaOptions,
            this.queryParams.area,
          ),
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'area'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'area') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.fileList = []
      this.open = true
      this.title = '添加光缆'
    },
    clearFiles(){
      this.fileList = []
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getCable(id).then((response) => {
        this.form = response.data.sOpticalCable
        this.form.area = this.form.area.split(',')
        if(this.form.opticalLine && this.form.length){
          this.form.opticalLine = this.form.opticalLine.split(',')
        }
        var arr = []
        for (var i = 0; i < response.data.list.length; i += 8) {
          arr.push(response.data.list.slice(i, i + 8))
        }
        this.xinList = arr
        this.open = true
        this.title = '修改光缆'
        if(this.form.fileList){
          this.fileList = JSON.parse(this.form.fileList)
        }else{
          this.fileList = []
        }
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.form.fileList = JSON.stringify(this.fileList)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let submitData = {...this.form};
          if(submitData.area && submitData.length){
            submitData.area = submitData.area.join(',')  
          }
          if(submitData.opticalLine && submitData.length){
            submitData.opticalLine = submitData.opticalLine.join(',')//lmk
          } 
          let submitFormData = {
            sOpticalCable: submitData,
            // cores: [],
          }
          // if (this.xinList && this.xinList.length) {
          //   let arr = []
          //   let i = 1
          //   this.xinList.forEach((e) => {
          //     e.forEach((itemElement) => {
          //       arr.push({ cableNum: i, cableValue: itemElement.cableValue })
          //       i++
          //     })
          //   })
          //   submitFormData.cores = arr
          // }
          if (this.form.id != null) {
            updateCable(submitFormData).then((response) => {
              this.msgSuccess('修改成功')
              this.open = false
              this.xinList = []
              this.getList()
            })
          } else {
            addCable(submitFormData).then((response) => {
              this.msgSuccess('新增成功')
              this.open = false
              this.xinList = []
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id
      this.$confirm('是否删除光缆名称为"' + row.name + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return delCable(ids)
        })
        .then(() => {
          this.getList()
          this.open = false
          this.msgSuccess('删除成功')
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有光缆数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return exportCable(queryParams)
        })
        .then((response) => {
          this.download(response.msg)
        })
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '光缆数据导入'
      this.upload.open = true
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then((response) => {
        this.download(response.msg)
      })
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
      this.getList()
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
     // 文件上传
    imgUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 5
      if (!isRightSize) {
        this.$message.error('文件大小超过 5MB')
      }
      return isRightSize
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    imgFileSuccess(e){
      this.fileList.push({name: '', url: process.env.VUE_APP_BASE_API + e.fileName})
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
    }
  },
}
</script>

<style lang="scss" scoped>
.xin-content {
  padding: 5px;
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px dashed #999;
  .xin-item {
    width: 23%;
    margin-bottom: 3px;
  }
}

.el-col {
  border: 1px solid transparent;
}
.colStyle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.searchBox {
  min-width: 50px;
  height: 28px;
  margin-top: 6px;
  border-radius: 14px;
  display: flex;
  font-size: 13px;
  background: #d7d7d7;
  line-height: 28px;
  margin-left: 6px;
  .text {
    padding-left: 14px;
    padding-right: 7px;
  }
  .icon {
    padding-right: 5px;
    display: flex;
    align-items: center;
    i {
      font-size: 20px;
      color: red;
    }
  }
}

.name {
  display: flex;
  flex-direction: column;
}
.title {
  color: #333;
  font-size: 14px;
}
.detail {
  display: flex;
  color: #7f7f7f;
  font-size: 12px;
}
.ml20 {
  margin-left: 20px;
}
.h28 {
  height: 28px;
  margin-top: 3px;
}
.resNum {
  margin-top: 2px;
  font-size: 14px;
}

</style>
